<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手机微信</title>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/iconfont.css">

  <link rel="stylesheet" href="css/wx.css">
</head>

<body>

  <!-- 整体是上中下布局，上下固定，中间会有滚动 -->
  <div class="main">

    <div class="top-box">

      <div>微信</div>

      <div>
        <i class="iconfont">&#xe6e4;</i>
        <i class="iconfont">&#xe62f;</i>
      </div>

    </div>

    <div class="center-box">


      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>

      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>


      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>
      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>


      <!-- 聊天内容的部分 -->
      <div class="chat-box">
        <!-- 左边是大图标 -->
        <div class="chat-box-left">
          <i class="iconfont">&#xe655;</i>
        </div>

        <!-- 右边是两行 -->
        <div class="chat-box-right">

          <div class="chat01">
            <div class="info">教学部</div>
            <div>10:04</div>
          </div>

          <div class="chat01">
            <div>下午全体开会...</div>
            <i class="iconfont">&#xe62d;</i>
          </div>

        </div>

      </div>



    </div>

    <div class="bottom-box">

      <div class="active">
        <i class="iconfont">&#xe79f;</i>
        <br>
        微信
      </div>

      <div>
        <i class="iconfont">&#xe655;</i>
        <br>
        通讯录
      </div>

      <div>
        <i class="iconfont">&#xe8af;</i>
        <br>
        发现
      </div>

      <div>
        <i class="iconfont">&#xe758;</i>
        <br>
        我
      </div>


    </div>

  </div>



</body>

</html>